<script lang="ts" setup>

    const emits = defineEmits(["searchtext"]);
    const textvalue = ref('')
    const textareaRef = ref();  
    const textareaHeight  =  ref(25);
    //点击输入框 是否显示焦点
    const isFocused = ref(false);
    // 提交信息后 按钮 输入框等流式输出完成后 才可点击 搜索
    const disabled = ref(false);
    const props = defineProps({
        disabledvalue:{
            type:Boolean,
            required: true,
        }
    });
    // 搜索函数 点击图片 或者回车搜索 触发函数 回答 
    const performSearch = function(event:any){
        event.preventDefault(); // 阻止默认行为，防止textarea中换行
        if (disabled.value==true) {
            ElMessage.warning('请等AI客服回复完再发送哦~ ')    
            textareaRef.value.focus();        
        }else{
            if (textvalue.value=='') {
                ElMessage.error('发送内容不能为空! ')
            }else if(/^ *$/.test(textvalue.value)){
                ElMessage.error('发送内容不能为空! ')
            }else{
                emits('searchtext',textvalue.value,true)
                textareaRef.value.focus();
                textvalue.value = ''
            }
        }
    }
    // 监听列表页面是否请求完成  完成继续下一次提问
    watch(()=>props.disabledvalue,(newValue,oldValue)=>{
        disabled.value = newValue;
    },{immediate:true,deep:true})   
</script>

<!-- AI回复的输入框 按钮 -->
<template>
    <div class=" flex flex-col btn-box w-full relative ml-9" style="max-width: 872px;margin:45px auto 0">
        <div  class="w-full h-full flex search-input-box " :class="{ focused: isFocused }">
                <div class="input-box-inner">
                    <textarea ref="textareaRef"  placeholder="请输入您的内容" @keydown.enter="performSearch"   v-model="textvalue" :style="{height: textareaHeight+'px'}" @focus="isFocused = true" @blur="isFocused = false"  ></textarea>
                </div>
                <div class="w-7 h-7 cursor-pointer" @click="performSearch">
                    <div class="w-7 h-7 btn-text text-center"><el-icon color="#FFF" :size="15"><Promotion /></el-icon></div>
                    <!-- <img src="https://chatglm.cn/img/send.6d617ab7.svg" class="w-7 h-7 btn-text" alt=""> -->
                </div>
        </div>
    </div>
</template>

<style scoped>
.btn-box {
    padding-bottom: 12px;
    box-sizing: border-box;
    flex: none;
    position: relative;
}

.search-input-box{
    padding: 12px 16px;
    display: flex;
    border-radius: 12px;
    transition: padding .6s ease;
    width: 100%;
    box-sizing: border-box;
    line-height: 30px;
    align-items: center;
    max-height: 170px;
    /* border: 1px solid #545459; */
    border: 1px solid var(--v-box-text-border-color);

}
.focused {
  border: 1px solid var(--v-border-color); /* 更改为你想要的颜色和样式 */
}
.input-box-inner{
    flex: 1;
}
.input-box-inner textarea{
    max-height: 324px;
    caret-color: #2454ff;
    margin: 0;
    width: calc(100% - 16px);
    flex: 1;
    height: 20px;
    padding: 0;
    transition: all .6s ease;
    display: block;
    box-sizing: border-box;
    background-color: #fff0;
    padding-right: 5px;
    color: var(--v-txt_icon_black_3, #1a2029);
    outline: none;
    border: none;
    resize: none;
    font-size: 15px;
    line-height: 25px;
    font-family: PingFang SC;
    font-style: normal;
    scrollbar-width: none;
    outline-color: #545459;
}
.btn-text{
    opacity: .8;
    /* background-color: #1A2029; */
    background-color: var(--v-txt_icon_black_1);
    border-radius: 50%;
}
.btn-text:hover{
    background-color: #409EFF;
}
</style>